<template>
  <div class="h-100 clearfix right_box">
    <ping :ping="ping" @guanbi="pingguanbi($event)"></ping>
    <div class="left_box tree-box moreLine" :style="{ paddingBottom: transferHeight.pb + 'px' }">
      <div class="left_item">
        <el-radio-group v-model="radioList" @change="fenzuChange">
          <el-radio-button label="安装地址"></el-radio-button>
          <el-radio-button label="资产分组"></el-radio-button>
        </el-radio-group>
        <!-- <treesBox v-if="shuaxingTree" v-show="radioList === '辖区' ? true : false" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
        <ul v-show="radioList === '辖区' ? false : true" class="zicanfanzhuBox">
          <li v-for="item in zicanfanzhuList" :key="item.id">
            <div class="zicanfanzhu" @click="fenzhuXZ(item)">{{ item.sbzmc }}</div>
          </li>
        </ul>-->
        <treesBox v-if="shuaxingTree" v-show="radioList === '安装地址'" :treesBox="treesBox" @handleNodeClick="treeClick($event)"></treesBox>
        <ul v-show="radioList === '资产分组'" class="zicanfanzhuBox">
          <li v-for="item in zicanfanzhuList" :key="item.id">
            <div class="zicanfanzhu" @click="fenzhuXZ(item)">{{ item.sbzmc }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="problemList">
      <div class="problem-R bg-f2" :style="{ minHeight: transferHeight.contentH + 'px' }">
        <div class="bg-f2 bg-fff">
          <!-- 搜索条件 -->
          <el-form :inline="true" :model="harderBox">
            <el-form-item>
              <el-button type="success" class="max_btn btnSizeStyle" icon="el-icon-plus" :disabled="quanxianBtns.btn1" @click="addUser('添加资产')">添加资产</el-button>
            </el-form-item>
            <el-form-item label="品牌:">
              <el-select v-model="harderBox.pingpai" :no-data-text="tiText1" filterable clearable placeholder="请选择">
                <el-option v-for="item in ppmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="资产类型:">
              <el-cascader v-model.trim="harderBox.zicanglx" :options="zicanOptions" :props="{ checkStrictly: true }" filterable clearable class="zidainWidth"></el-cascader>
              <!-- <el-select v-model="harderBox.zicanglx" filterable clearable placeholder="请选择">
                <el-option
                  v-for="item in zicanOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>-->
            </el-form-item>
            <el-form-item label="资产状态:">
              <el-select v-model="harderBox.zicanZT" filterable clearable placeholder="请选择">
                <el-option v-for="item in zicanZTOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="网络状态:">
              <el-select v-model="harderBox.wlzt" clearable placeholder="请选择">
                <el-option label="正常" value="0"></el-option>
                <el-option label="异常" value="1"></el-option>
              </el-select>
            </el-form-item>-->
            <el-form-item label="安装时间:">
              <el-date-picker
                v-model="harderBox.azTime"
                :picker-options="pickerBeginDateBefore"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-input v-model.trim="harderBox.sous" clearable prefix-icon="el-icon-search" placeholder="输入名称/IP/序列码" class="search_btn search_icon"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">搜 索</el-button>
            </el-form-item>
            <!-- <el-form-item><el-button type="primary" size="small" plain>导出</el-button></el-form-item>
            <el-form-item><el-button type="primary" size="small" plain @click="Dayin">打印</el-button></el-form-item>-->
          </el-form>
          <!-- 表格 -->
          <div v-loading="Loading">
            <el-table
              ref="multipleTable"
              stripe
              @select="isCheck"
              @select-all="isCheckAll"
              @row-dblclick="rowClick"
              highlight-current-row
              clearSelection
              border
              :data="rolelist"
              id="printcontent"
              :default-sort="{ prop: 'CJSJ', order: 'descending' }"
              :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
              v-loading="tableLoad"
              @sort-change="sortthiscolumn"
            >
              <!-- 提示语句 -->
              <template slot="empty">{{ tableMessage }}</template>
              <el-table-column type="selection" width="45"></el-table-column>
              <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
              <!-- <el-table-column label="资产名称" prop="zcmc" fixed="left" min-width="150">
            <template slot-scope="scope">
              <el-tooltip placement="top-start" effect="light" class="bandinGuanxi">
                <div slot="content" v-show="scope.row.bdzt === 1 ? true : false">已绑至【{{ scope.row.bdzt === 1 ? scope.row.ywzjmc : '' }}】</div>
                <div slot="content" v-show="scope.row.bdzt === 2 ? true : false">已绑至【{{ scope.row.bdzt === 2 ? scope.row.kkmc : '' }}】</div>
                <div slot="content" v-show="scope.row.bdzt === 3 ? true : false">已绑至【{{ scope.row.bdzt === 3 ? scope.row.dzjcmc : '' }}】</div>
                <svg class="iconfont img_shouji" aria-hidden="true" v-show="scope.row.bdzt">
                  <use :xlink:href="'#el-icon-my' + exclamatoryType(scope.row.bdzt)" />
                </svg>
              </el-tooltip>
              <el-tooltip effect="dark" placement="top-start" v-if="scope.row.zcmc === null || scope.row.zcmc.length > 8 ? true : false">
                <div slot="content">{{ scope.row.zcmc }}</div>
                <el-button type="text" @click="userBox(scope.row)" class="detailsBtn">{{ scope.row.zcmc }}</el-button>
              </el-tooltip>
              <el-button type="text" class="detailsBtn" @click="userBox(scope.row)" v-if="scope.row.zcmc === null || scope.row.zcmc.length > 8 ? false : true">{{ scope.row.zcmc }}</el-button>
            </template>
              </el-table-column>-->
              <el-table-column label="资产名称" prop="zcmc" show-overflow-tooltip min-width="180">
                <template slot-scope="scope">
                  <el-tooltip placement="top-start" effect="light" class="bandinGuanxi" v-if="scope.row.bdzt > 0">
                    <!-- 已绑至【{{ scope.row.bdzt === 1 ? scope.row.ywzjmc : scope.row.bdzt === 2 ? scope.row.kkmc : scope.row.dzjcmc }}】 -->
                    <div slot="content" v-show="scope.row.bdzt > 0">
                      <span slot="content" v-show="scope.row.bdzt === 1 ? true : false">已绑至【{{ scope.row.bdzt === 1 ? scope.row.ywzjmc : '' }}】</span>
                      <span slot="content" v-show="scope.row.bdzt === 2 ? true : false">已绑至【{{ scope.row.bdzt === 2 ? scope.row.kkmc : '' }}】</span>
                      <span slot="content" v-show="scope.row.bdzt === 3 ? true : false">已绑至【{{ scope.row.bdzt === 3 ? scope.row.dzjcmc : '' }}】</span>
                      <span slot="content" v-show="scope.row.bdzt === 4 ? true : false">已绑至【{{ scope.row.bdzt === 4 ? '机房' : '' }}】</span>
                    </div>
                    <svg class="iconfont img_shouji" aria-hidden="true" v-show="scope.row.bdzt">
                      <use :xlink:href="'#el-icon-my' + exclamatoryType(scope.row.bdzt)" />
                    </svg>
                  </el-tooltip>
                  <span v-html="getzcmc(scope.row)" @click="userBox(scope.row)" class="pl5"></span>
                </template>
              </el-table-column>
              <el-table-column label="资产类型" prop="zclxmc" min-width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                  <div>
                    <span>{{ scope.row.zclxmc1 ? scope.row.zclxmc1 + ' / ' : '' }}</span>
                    <span>{{ scope.row.zclxmc2 ? scope.row.zclxmc2 + ' / ' : '' }}</span>
                    <span>{{ scope.row.zclxmc }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="安装地址" prop="csmc" show-overflow-tooltip min-width="200">
                <template slot-scope="scope">
                  <span>{{ scope.row.sfmc + scope.row.csmc + scope.row.qxmc + scope.row.xzjdmc + scope.row.xxdz }}</span>
                </template>
              </el-table-column>
              <el-table-column label="IP地址" prop="ip" min-width="120"></el-table-column>
              <el-table-column label="品牌" prop="ppmc" width="80"></el-table-column>
              <el-table-column label="型号" prop="xh" show-overflow-tooltip min-width="140"></el-table-column>
              <el-table-column label="设备序列码" prop="sbxlh" show-overflow-tooltip min-width="120"></el-table-column>
              <el-table-column label="安装时间" prop="azrq" sortable min-width="100">
                <template slot-scope="scope">{{ scope.row.azrq | dateFormat2 }}</template>
              </el-table-column>
              <!-- <el-table-column label="网络状态" width="70" align="center">
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="Number(scope.row.zxzt) === 0 ? '网络正常' : '网络异常'"
                    placement="top-start"
                  >
                    <svg
                      class="iconfont wlzt"
                      aria-hidden="true"
                      style="width: 20px; height: 20px"
                    >
                      <use
                        :xlink:href="`#${Number(scope.row.zxzt) === 0 ? 'el-icon-mywangluo_lan' : 'el-icon-mywangluo_hui'}`"
                        style="font-size: 50px"
                      />
                    </svg>
                  </el-tooltip>
                </template>
              </el-table-column>-->
              <el-table-column label="LAN/IoT状态" width="100">
                <template slot-scope="scope">
                  <div v-if="aloneLoading" class="loading1" style="padding: 10px 0">
                    <div class="myloading"></div>
                    <div class="myloading"></div>
                    <div class="myloading"></div>
                    <div class="myloading"></div>
                    <div class="myloading"></div>
                  </div>
                  <div v-else>
                    <div v-if="Number(scope.row.wlzt) === 1 || Number(scope.row.wlzt) === 2">
                      <!-- 1LAN/IoT在线    2LAN/IoT不在线 zxzt(除主机外其他资产) 0-网络正常 1-网络异常-->
                      <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
                        <svg class="iconfont wlzt" aria-hidden="true">
                          <use :xlink:href="`#${Number(scope.row.wlzt) === 1 || Number(scope.row.zxzt) === 0 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
                        <svg class="iconfont wlzt" aria-hidden="true">
                          <use :xlink:href="`#${Number(scope.row.wlzt) === 1 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                    </div>
                    <div v-else>
                      <!-- wlzt(主机) 3LAN在线    4IoT在线   zxzt(除主机外其他资产) 0-网络正常 1-网络异常-->
                      <el-tooltip class="item" effect="dark" content="LAN网络" placement="top-start">
                        <!-- LAN网络 -->
                        <svg class="iconfont wlzt" aria-hidden="true">
                          <use :xlink:href="`#${Number(scope.row.wlzt) === 3 || Number(scope.row.zxzt) === 0 ? 'el-icon-myLAN_network' : 'el-icon-myLAN_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="IoT网络" placement="top-start">
                        <svg class="iconfont wlzt" aria-hidden="true">
                          <use :xlink:href="`#${Number(scope.row.wlzt) === 4 ? 'el-icon-myIoT_network' : 'el-icon-myIoT_Nonetwork'}`" style="font-size: 50px" />
                        </svg>
                      </el-tooltip>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <!-- <el-table-column label="维保期限" min-width="100">
                <template slot-scope="scope">
                  <el-tag v-show="scope.row.bxq === 0 ? false : true">{{ scope.row.bxq > 9 ? scope.row.bxq : '0' + scope.row.bxq }}个月</el-tag>
                </template>
              </el-table-column>-->
              <!-- <el-table-column label="国标编码" prop="gbbm" show-overflow-tooltip min-width="100"></el-table-column> -->
              <el-table-column label="资产状态" prop="zczt" min-width="100">
                <template slot-scope="scope">
                  <el-tag v-if="Number(scope.row.zczt) === 1" type="success" size="medium">{{ '使用中' }}</el-tag>
                  <el-tag v-else-if="Number(scope.row.zczt) === 2" type="info" size="medium">{{ '停用' }}</el-tag>
                  <el-tag v-else-if="Number(scope.row.zczt) === 3" type="danger" size="medium">{{ '报废审核中' }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
              <el-table-column label="添加时间" width="150" prop="createDate" sortable>
                <template slot-scope="scope">{{ scope.row.createDate | dateFormat }}</template>
              </el-table-column>
              <el-table-column label="操作" align="right" width="220" fixed="right">
                <template slot-scope="scope">
                  <div class="operations">
                    <el-button v-show="scope.row.zclx === 53 ? true : false" type="text" class="Btn_nan" @click="initWebpack(scope.row)">同步主机{{ scope.row.right }}</el-button>
                    <span class="operation" v-show="scope.row.zclx === 53 ? true : false"></span>

                    <el-button type="text" class="Btn_nan" @click="addUser('编辑资产', scope.row)" :disabled="quanxianBtns.btn2" v-show="scope.row.bdzt === 1 ? false : true"
                      >编辑{{ scope.row.right }}</el-button
                    >
                    <span class="operation" v-show="scope.row.bdzt === 1 ? false : true"></span>
                    <!-- <el-link
                :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true"
                :type="scope.row.ip !== '' && scope.row.ip !== null ? 'primary' : 'info' "
                :underline="false"
                :href="'http://' + scope.row.ip"
                target="_blank"
                    >远程控制</el-link>-->
                    <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" class="Btn_nan" @click="yuanChenKZ(scope.row)">远程控制</el-button>
                    <span class="operation"></span>
                    <el-button type="text" :disabled="scope.row.ip !== '' && scope.row.ip !== null ? false : true" class="Btn_nan" @click="showPingOk(scope.row)">ping</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- 分页 -->
          <el-row class="page-row">
            <el-col :span="12">
              <el-button type="primary" size="small" class="shoujiBtn btnSizeStyle" v-if="!quanxianBtns.btn7" :disabled="num !== 0 ? false : true" @click="addFenzhu">加入分组</el-button>
              <el-button type="danger" size="small" class="shoujiBtn btnSizeStyle" v-if="!quanxianBtns.btn8" :disabled="num !== 0 ? false : true" @click="pilianpf">批量报废</el-button>
              <span style="padding-left: 15px; color: #6d7278">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mybinding" /></svg
                >绑定主机
              </span>
              <span style="padding-left: 15px; color: #6d7278">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mybinding3-copy" /></svg
                >绑定卡口
              </span>
              <span style="padding-left: 15px; color: #6d7278">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-mybinding2-copy-copy" /></svg
                >绑定电子警察
              </span>
              <span style="padding-left: 15px; color: #6d7278">
                <svg class="iconfont imgIcon" aria-hidden="true">
                  <use xlink:href="#el-icon-myjifang" /></svg
                >绑定机房
              </span>
            </el-col>
            <el-col :span="12" style="height: 47px; display: table">
              <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 50]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="total"
              ></el-pagination>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 资产详情 -->
    <el-dialog title="资产详情" :visible.sync="contractDialogVisible" class="dialogText">
      <el-tabs class="noScorllFixed" v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="jbxx">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">资产名称：</span>
                <span>{{ contractDetailList.zcmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">资产类型：</span>
                <span>{{ contractDetailList.zclxmc1 ? contractDetailList.zclxmc1 + ' / ' : '' }}</span>
                <span>{{ contractDetailList.zclxmc2 ? contractDetailList.zclxmc2 + ' / ' : '' }}</span>
                <span>{{ contractDetailList.zclxmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">品牌：</span>
                <span>{{ contractDetailList.ppmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">型号：</span>
                <span>{{ contractDetailList.xh }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">资产状态：</span>
                <el-tag v-if="contractDetailList.zczt === '1'" type="success" size="medium">{{ '使用中' }}</el-tag>
                <el-tag v-else-if="contractDetailList.zczt === '2'" type="info" size="medium">{{ '停用' }}</el-tag>
                <el-tag v-else-if="contractDetailList.zczt === '3'" type="danger" size="medium">{{ '报废审核中' }}</el-tag>
              </el-row>
              <el-row>
                <span class="contentFont">使用机构：</span>
                <span>{{ contractDetailList.sydwmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">运维单位：</span>
                <span>{{ contractDetailList.ywdwmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">承建单位：</span>
                <span>{{ contractDetailList.cjdwmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">添加人：</span>
                <span>{{ contractDetailList.createBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">添加时间：</span>
                <span>{{ contractDetailList.rksj | dateFormat }}</span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight">
              <el-row>
                <span class="contentFont">所属厂家：</span>
                <span>{{ contractDetailList.cjmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">出厂日期：</span>
                <span>{{ contractDetailList.ccrq | dateFormat }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">维保期限：</span>
                <el-tag size="medium" v-show="contractDetailList.bxq === 0 ? false : true">{{ contractDetailList.bxq > 9 ? contractDetailList.bxq : '0' + contractDetailList.bxq }}个月</el-tag>
              </el-row>
              <el-row>
                <span class="contentFont">所属合同：</span>
                <span>{{ contractDetailList.htmc }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">安装时间：</span>
                <span>{{ contractDetailList.azrq | dateFormat2 }}</span>
              </el-row>
              <el-row class="rowRelative">
                <span class="contentFont">辖区(安装地址)：</span>
                <span>{{ contractDetailList.sfmc + contractDetailList.csmc + contractDetailList.qxmc + contractDetailList.xzjdmc + contractDetailList.xxdz }}</span>
              </el-row>
              <el-row v-if="this.panduanShow">
                <span class="contentFont">坐标(经度/纬度)：</span>
                <!-- <span>{{ contractDetailList.wd ? contractDetailList.wd : '' + ',' + contractDetailList.jd ? contractDetailList.jd : '' }}</span> -->
                <span>{{ contractDetailList.jd ? `${contractDetailList.jd},${contractDetailList.wd}` : '' }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新人：</span>
                <span>{{ contractDetailList.updateBy }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">更新时间：</span>
                <span>{{ contractDetailList.updateDate | dateFormat }}</span>
              </el-row>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="图片信息" name="tpxx">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row style="position: relative">
                <span class="contentFont" style="position: absolute; top: 5px">资产图片：</span>
                <span style="margin-left: 105px">
                  <span v-if="yuLanTP(contractDetailList.zzzp).length > 0">
                    <el-image
                      v-for="(item, index) in yuLanTP(contractDetailList.zzzp)"
                      :key="index"
                      :style="{ width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }"
                      :src="item"
                      :preview-src-list="yuLanTP(contractDetailList.zzzp)"
                    >
                      <div slot="error" class="image-slot">
                        <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                      </div>
                    </el-image>
                  </span>
                  <span v-else :style="{ display: 'inline-block', width: '60px', height: '60px', verticalAlign: 'middle', paddingRight: '10px' }">
                    <img style="width: 100%" src="@/assets/images/shan.jpg" alt />
                  </span>
                </span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight"></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="主机信息" name="zjxx" v-if="contractDetailList.zclx === 53">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">IP地址：</span>
                <span>{{ contractDetailList.ip }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">设备序列号：</span>
                <span>{{ contractDetailList.sbxlh }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">设备编码：</span>
                <span>{{ contractDetailList.fxs }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">国标编码：</span>
                <span>{{ contractDetailList.gbbm }}</span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight"></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="网络信息" name="wlzt" v-if="contractDetailList.mb === 1 && contractDetailList.zclx !== 53">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row>
                <span class="contentFont">IP地址：</span>
                <span>{{ contractDetailList.ip }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">管理端口：</span>
                <span>{{ contractDetailList.gldk }}</span>
              </el-row>
              <el-row v-show="this.panduanShow">
                <span class="contentFont">管理账号：</span>
                <span>{{ contractDetailList.dlzh }}</span>
              </el-row>
              <el-row v-show="this.panduanShow">
                <span class="contentFont">密码：</span>
                <span>{{ contractDetailList.dlmm }}</span>
              </el-row>
              <el-row>
                <span class="contentFont">设备序列号：</span>
                <span>{{ contractDetailList.sbxlh }}</span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight"></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="动力环境" name="dlhj" v-if="contractDetailList.mb === 2">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">串口号：</span>
                <span>{{ contractDetailList.com }}</span>
              </el-row>
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">地址码：</span>
                <span>{{ contractDetailList.slaveId }}</span>
              </el-row>
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">波特率：</span>
                <span>{{ contractDetailList.baudRate }}</span>
              </el-row>
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">校验位：</span>
                <span>{{ contractDetailList.parity }}</span>
              </el-row>
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">数据位：</span>
                <span>{{ contractDetailList.dataBits }}</span>
              </el-row>
              <el-row v-show="this.panduanShow2">
                <span class="contentFont">停止位：</span>
                <span>{{ contractDetailList.stopBits }}</span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight"></el-col>
            <el-col :span="10" class="lineHight"></el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="服务器信息" name="fwqxx" v-if="contractDetailList.mb === 3">
          <el-row class="p_15">
            <el-col :span="12" class="lineHight">
              <el-row v-show="this.panduanShow3">
                <span class="contentFont">系统类型：</span>
                <span>{{ contractDetailList.xtlx }}</span>
              </el-row>
              <el-row v-show="this.panduanShow3">
                <span class="contentFont">协议类型：</span>
                <span>{{ contractDetailList.xylx }}</span>
              </el-row>
              <el-row v-show="this.panduanShow || this.panduanShow3">
                <span class="contentFont">IP地址：</span>
                <span>{{ contractDetailList.ip }}</span>
              </el-row>
              <el-row v-show="this.panduanShow || this.panduanShow3">
                <span class="contentFont">端口：</span>
                <span>{{ contractDetailList.gldk }}</span>
              </el-row>
              <el-row v-show="this.panduanShow3">
                <span class="contentFont">SNMP版本：</span>
                <span>{{ contractDetailList.snmpbb }}</span>
              </el-row>
              <el-row v-show="this.panduanShow3">
                <span class="contentFont">SNMP密钥：</span>
                <span>{{ contractDetailList.snmpmy }}</span>
              </el-row>
            </el-col>
            <el-col :span="10" class="lineHight"></el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button class="btnSizeStyle" type="primary" @click="contractDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
    <!-- 加入分组 -->
    <el-dialog :visible.sync="dialogVisible" width="45.8%" @close="offFZ">
      <span slot="title" class="dialogTitle">
        加入自定义分组
        <!-- <em>已选设备{{num}}</em> -->
      </span>
      <el-input placeholder="搜索分组名称" clearable v-model.trim="fenzuList.searchFZ" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" class="searchFZ_btn" @click="searchFenzhuXinxi"></el-button>
      </el-input>
      <ul class="dropDown">
        <li v-for="item in zicanfanzhuList" :key="item.id">
          <el-checkbox-group v-model="fenzuList.fenzuCheckList" style="height: 50px">
            <el-checkbox :label="item.id">{{ item.sbzmc }}</el-checkbox>
          </el-checkbox-group>
        </li>
      </ul>
      <span slot="footer">
        <div class="footerPagination">
          <!-- <div></div> -->
          <el-pagination
            background
            layout="prev, pager, next, total"
            @current-change="addHandleCurrentChange"
            :current-page.sync="addCurrentPage"
            :total="addTotal"
            :hide-on-single-page="paginationValue"
          ></el-pagination>
          <div>
            <el-button class="btnSizeStyle" @click="offFZ" size="small">取 消</el-button>
            <el-button class="btnSizeStyle" type="primary" @click="submitFZ" :disabled="fenzuList.fenzuCheckList.length !== 0 ? false : true" size="small" v-preventReClick>确 定</el-button>
          </div>
        </div>
      </span>
    </el-dialog>
    <!-- 报废 -->
    <el-dialog title="提示" :visible.sync="dialogVisible5" width="30%" @close="offBF">
      <span slot="title" class="dialogTitle">
        资产报废
        <!-- <em>已选设备{{num}}</em> -->
      </span>
      <el-form :model="bfruleForm" :rules="bfrules" ref="bfruleForm">
        <el-form-item label="报废原因:" prop="textarea">
          <!-- <span class="HostTitle">:</span> -->
          <el-input type="textarea" :rows="5" placeholder="请输入内容" :maxlength="200" resize="none" v-model.trim="bfruleForm.textarea"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button class="btnSizeStyle" @click="dialogVisible5 = false" size="small">取 消</el-button>
        <el-button class="btnSizeStyle" type="primary" @click="baoFei" size="small" v-preventReClick>确 定</el-button>
      </span>
    </el-dialog>
    <!-- 报废失败时 -->
    <el-dialog title="提示" :visible.sync="dialogVisible6" width="30%">
      <span slot="title" class="dialogTitle">
        资产报废
        <!-- <em>已选设备{{num}}</em> -->
      </span>
      <span class="HostTitle">选中的资产中设备已被绑定，请先解绑后在加入报废库。</span>
      <span slot="footer">
        <el-button type="primary" @click="dialogVisible6 = false" size="small">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
import { ziC } from '@/utils/allUrl.js'
// import { endLoading } from '@/utils/loading.js'
import Ping from '@/components/ping/index.vue'
import treesBox from '@/components/treesBox/index.vue'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
import { threeLevelH } from '@/assets/js/calcHeight'
// import { getUUID, isJSON, errorTips, newSocket } from '@/utils/websocket'
export default {
  data: function () {
    return {
      ping: {
        name: '', // ping设备名称
        speedOpen: false, // ping框
        ip: '',
      },
      treesBox: {
        url: 'ZI_CHAN',
        GZKZ: false,
      }, // tree图的请求地址
      pickerBeginDateBefore: {
        // 设置只能选择到今天及以前的日期
        disabledDate(time) {
          return time.getTime() >= Date.now()
        },
      },
      shuaxingTree: true, // 刷新tree
      contractDialogVisible: false, // 资产详情
      contractDetailList: [], // 详情数据
      radioList: '安装地址',
      ppmcOptions: [], // 品牌
      zicanOptions: [], // 资产类型
      cityOptions: [], // 辖区
      // 资产分组
      zicanfanzhuList: [],
      // 资产状态
      zicanZTOptions: [
        {
          value: 1,
          label: '使用中',
        },
        {
          value: 2,
          label: '停用',
        },
        {
          value: 3,
          label: '报废审核中',
        },
      ],
      harderBox: {
        zicanZT: '',
        pingpai: '',
        zicanglx: '',
        azTime: '',
        // wlzt: '',
        sous: '',
      },
      rolelist: [], // 资产列表
      currentPage: 1, // 页码
      pageSize: 10, // 页数
      total: 0, // 总条数
      paginationValue: false, // 数据为一条时隐藏
      addTotal: 0, // 分组总数
      addCurrentPage: 1, // 分组页码
      dialogVisible: false, // 分配
      dialogVisible5: false, // 批量报废
      dialogVisible6: false, // 报废失败时
      num: 0,
      fenzuList: {
        searchFZ: '', // 分组搜索
        fenzuCheckList: [], // 分组勾选
      },
      // 报废的原因
      bfruleForm: {
        textarea: '',
      },
      bfrules: {
        textarea: [{ required: true, message: '请输入报废原因', trigger: 'blur' }],
      },
      gouXuanList: [], // 勾选的数据源
      zujilxNum: 53, // 前卫主机类型
      xianQu: null, // 辖区搜索条件
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn4: true,
        btn7: true,
        btn8: true,
      },
      tableLoad: false,
      panduanShow: false, // 详细信息传感器显示隐藏
      panduanShow2: false, // 详细信息传感器显示隐藏
      panduanShow3: false, // 详细信息传感器显示隐藏
      tableTimer: null,
      Loading: false, // 同步主机加载
      tableMessage: '',
      // socket: '',
      // UUID: null,
      // zjsn: null, // 设备序列码
      // zjip: null, // 主机ip
      // zjxqbm: null, // 主机辖区编码
      // zhujiCoent: [
      //   {
      //     R_00030009: '', // 设备序列号
      //     R_00030008: '', // 设备编码
      //     R_0003000b: '', // 国标编码
      //     R_00030004: '', // 设备安装地址
      //     R_00030003: '', // 详细地址
      //     R_0003000a: '', // 行政区划编码
      //     R_00030005: '', // 所属运维机构
      //     R_00100003: '', // 本地ip
      //     R_00100004: '', // 子网掩码
      //     R_00100005: '', // 网关
      //     R_01050004: '', // ICCID
      //   },
      //   {
      //     R_000b0003: '', // 设备名称1
      //     R_000b0007: '', // 国标编码
      //     R_000b0008: '', // 第三方关联编码
      //     R_000b0004: '', // 目的ip地址
      //     R_000b0005: '', // 子网掩码
      //     R_000b0006: '', // 端口
      //     R_000c0003: '', // 设备名称2
      //     R_000c0007: '', // 国标编码
      //     R_000c0008: '', // 第三方关联编码
      //     R_000c0004: '', // 目的ip地址
      //     R_000c0005: '', // 子网掩码
      //     R_000c0006: '', // 端口
      //   },
      //   {
      //     R_000d0003: '', // 设备名称3
      //     R_000d0007: '', // 国标编码
      //     R_000d0008: '', // 第三方关联编码
      //     R_000d0004: '', // 目的ip地址
      //     R_000d0005: '', // 子网掩码
      //     R_000d0006: '', // 端口
      //     R_000e0003: '', // 设备名称4
      //     R_000e0007: '', // 国标编码
      //     R_000e0008: '', // 第三方关联编码
      //     R_000e0004: '', // 目的ip地址
      //     R_000e0005: '', // 子网掩码
      //     R_000e0006: '', // 端口
      //   },
      //   {
      //     R_00050005: '', // 设备名称1
      //     R_0005000d: '', // 国标编码
      //     R_0005000e: '', // 第三方关联编码
      //     R_00050006: '', // 目的ip地址
      //     R_00050007: '', // 子网掩码
      //     R_0005000c: '', // 端口
      //     R_00060005: '', // 设备名称2
      //     R_0006000d: '', // 国标编码
      //     R_0006000e: '', // 第三方关联编码
      //     R_00060006: '', // 目的ip地址
      //     R_00060007: '', // 子网掩码
      //     R_0006000c: '', // 端口
      //     R_00070005: '', // 设备名称3
      //     R_0007000d: '', // 国标编码
      //     R_0007000e: '', // 第三方关联编码
      //     R_00070006: '', // 目的ip地址
      //     R_00070007: '', // 子网掩码
      //     R_0007000c: '', // 端口
      //   },
      //   {
      //     R_00080005: '', // 设备名称4
      //     R_0008000d: '', // 国标编码
      //     R_0008000e: '', // 第三方关联编码
      //     R_00080006: '', // 目的ip地址
      //     R_00080007: '', // 子网掩码
      //     R_0008000c: '', // 端口
      //     R_00090005: '', // 设备名称5
      //     R_0009000d: '', // 国标编码
      //     R_0009000e: '', // 第三方关联编码
      //     R_00090006: '', // 目的ip地址
      //     R_00090007: '', // 子网掩码
      //     R_0009000c: '', // 端口
      //     R_000a0005: '', // 设备名称6
      //     R_000a000d: '', // 国标编码
      //     R_000a000e: '', // 第三方关联编码
      //     R_000a0006: '', // 目的ip地址
      //     R_000a0007: '', // 子网掩码
      //     R_000a000c: '', // 端口
      //   },
      // ],
      // shuju: [],
      // numval: 0,
      // errNum: 0,
      // zjTime: null,
      tiText1: '暂无数据', // 品牌提示
      activeName: 'jbxx',
      aloneLoading: false, // 主机在线动画
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    aloneLoading(newVal, oldVal) {
      this.aloneTimeout = setTimeout(() => {
        if (this.aloneLoading) {
          this.aloneLoading = false
        }
      }, timeLoad)
    },
  },
  computed: {
    transferHeight: function () {
      // 计算屏幕滚动高度 - nav - 导航栏
      return {
        contentH: window.innerHeight - threeLevelH,
        pb: threeLevelH,
      }
    },
    exclamatoryType: function () {
      return function (index) {
        const a = 'binding'
        const b = 'binding3-copy'
        const c = 'binding2-copy-copy'
        const d = 'jifang'
        if (index === 1) {
          return a
        } else if (index === 2) {
          return b
        } else if (index === 3) {
          return c
        } else if (index === 4) {
          return d
        }
      }
    },
  },
  components: { Ping, treesBox },
  created: function () {
    this.jurisdictionBtn()
    // 获取用户辖区
    // this.data = JSON.parse(getUrl('xiaquCity'))
    // 获取辖区
    this.cityOptions = JSON.parse(getUrl('district'))
    // this.UUID = getUUID(32, 16)
    this.username = localStorage.getItem('userName') // 用户登录名
    // 获取资产类型
    this.getzican()
    // 获取品牌
    this.getPingpai()
    this.loadTable()
    if (JSON.stringify(this.$route.params) !== '{}') {
      var azTime = ''
      if (this.$route.params.azTime !== '') {
        azTime = this.$route.params.azTime.split('>')
        console.log('-----', azTime)
      }
      this.harderBox.pingpai = this.$route.params.pingpai // 品牌
      this.harderBox.zicanglx = this.$route.params.zicanglx // 资产类型
      this.harderBox.zicanZT = this.$route.params.zicanZT // 资产状态
      this.harderBox.azTime = azTime // 安装时间
      this.harderBox.sous = this.$route.params.sous // 资产名称/ip/sn号
      // this.currentPage = this.$route.params.currentPage
      // this.pageSize = this.$route.params.pageSize
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    } else {
      // 获取资产列表
      this.getZiList()
    }
  },
  methods: {
    loadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    // 获取列表网络状态
    async getWlzt(sns) {
      // console.log(sns)
      clearTimeout(this.aloneTimeout)
      this.aloneLoading = true
      const string = sns.join(',')
      const { data: res } = await this.$http.get(`api/host/selectHostNETStatusBySN?snStr=${string}`)
      if (res.code !== '0000') {
        return
      }
      this.rolelist.forEach((item, index) => {
        for (const k in res.data) {
          if (item.sbxlh === k) {
            item.wlzt = res.data[k]
          }
        }
      })
      this.aloneLoading = false
    },
    handleClick() {},
    async initWebpack(scope) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('SN', scope.sbxlh)
      const { data: res } = await this.$http.post(`${ziC}zcgl/tongBuXinXi`, params)
      this.tableLoad = false
      if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: `[${scope.zcmc}]${res.message}`,
          center: true,
        })
      } else {
        this.searchBtn()
        return this.$message({
          type: 'success',
          message: `[${scope.zcmc}]同步成功`,
          center: true,
        })
      }
    },
    // initWebpack(scope) {
    //   this.Loading = true
    //   this.zjTime = setTimeout(() => {
    //     this.Loading = false
    //     this.numval = 0
    //     this.shuju = []
    //     this.$message({
    //       type: 'error',
    //       message: '同步主机失败，请稍后重试！',
    //       center: true,
    //     })
    //   }, 3000)
    //   this.zjsn = scope.sbxlh
    //   this.zjip = scope.ip
    //   this.zjxqbm = scope.xqbm
    //   const that = this
    //   if (typeof WebSocket === 'undefined') {
    //     alert('您的浏览器不支持socket')
    //   } else {
    //     this.socket = new WebSocket(newSocket(this.username, this.UUID))
    //     that.socket.onopen = function () {
    //       that.zhujiCoent.forEach((item) => {
    //         that.getFirstId(item)
    //       })
    //     }
    //     that.socket.onmessage = this.getMessage
    //   }
    // },
    // getFor(obj, list) {
    //   for (const k in obj) {
    //     list.push({
    //       command_id: k.replace('R_', ''),
    //       value: '',
    //     })
    //   }
    // },
    // getFirstId(val) {
    //   const list = []
    //   this.getFor(val, list)
    //   const params = {
    //     user: this.username + this.UUID,
    //     sn: this.zjsn, // 序列号
    //     // xq: this.zjxqbm, // 辖区编码
    //     // ip: this.zjip, // IP地址
    //     // mm: Psd, // 设备密码
    //     doing: '01', // 要做的事情 01读 02写
    //     host_status: '0000', // 主机状态
    //     list: list, // 传输id-value
    //   }
    //   // 发送id 获取数据
    //   this.socket.send(JSON.stringify(params))
    // },
    // getMessage(msg) {
    //   switch (isJSON(msg.data)) {
    //     case false: // 主板实时数据
    //       break
    //     case true:
    //       // 接收到消息回复ok
    //       this.socket.send(`TILL${this.zjsn}OK`)
    //       if (typeof JSON.parse(msg.data) === 'object' && 'obj') {
    //         const res = JSON.parse(msg.data)
    //         switch (Number(res.doing)) {
    //           case 1: // 读取数据
    //             this.numval++
    //             // 状态码错误提示
    //             if (res.host_status !== '0000') {
    //               this.errNum++
    //               this.Loading = false
    //               clearTimeout(this.zjTime)
    //               if (this.errNum > 1) {
    //                 // errorTips(res.host_status)
    //                 errorTips(res.host_status, res.tips)
    //                 this.errNum = 0
    //               }
    //               return
    //             }
    //             console.log(this.errNum)
    //             if (res.list.length > 0) {
    //               for (let i = 0; i < res.list.length; i++) {
    //                 var id = res.list[i].command_id.toLowerCase()
    //                 var content = res.list[i].value
    //                 if (id === '00020003' || id === '00020024') {
    //                   content = content.replace(/[^\d.]/g, '')
    //                 }
    //                 this.chulishuji(content, id, this.numval)
    //               }
    //             }
    //             break
    //           default:
    //         }
    //       }
    //       break
    //     default:
    //   }
    //   this.setzisj()
    // },
    // chulishuji(val, id, num) {
    //   const obj = {
    //     ID: id,
    //     VALUE: val,
    //     num: num,
    //   }
    //   this.shuju.push(obj)
    // },
    // 发送主机数据
    // async setzisj() {
    //   const arr = []
    //   const arr2 = []
    //   this.shuju.forEach((item) => {
    //     if (item.num === 1) {
    //       arr.push(item)
    //     } else {
    //       arr2.push(item)
    //     }
    //   })
    //   if (this.numval === 5) {
    //     this.socket.send('CLOSE') // 告诉主机停止链接
    //     // 销毁监听
    //     this.socket.onclose = this.socket.close()
    //     const params = new URLSearchParams()
    //     params.append('TYXX', JSON.stringify(arr))
    //     params.append('TDXX', JSON.stringify(arr2))
    //     params.append('SN', this.zjsn)
    //     const { data: res } = await this.$http.post(`${ziC}zcgl/tongBuXinXi`, params)
    //     this.Loading = false
    //     clearTimeout(this.zjTime)
    //     if (res.code !== '0000') {
    //       this.numval = 0
    //       this.shuju = []
    //       return this.$message({
    //         type: 'error',
    //         message: res.message,
    //         center: true,
    //       })
    //     } else {
    //       this.searchBtn(1, this.pageSize)
    //       this.numval = 0
    //       this.shuju = []
    //       return this.$message({
    //         type: 'success',
    //         message: res.message,
    //         center: true,
    //       })
    //     }
    //   }
    // },
    getzcmc(row) {
      return `<span class="fontColor">${row.zcmc}</span>`
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'ZCZX_ZCGL_ZCLB') {
          item.children.forEach((item2) => {
            if (item2.qxdm === 'zcgl:insertZiChan') {
              this.quanxianBtns.btn1 = false // 添加资产
            } else if (item2.qxdm === 'zcgl:updateZiChan') {
              this.quanxianBtns.btn2 = false // 修改资产
            } else if (item2.qxdm === 'zcgl:insertZiChanExcel') {
              this.quanxianBtns.btn4 = false // 批量导入资产
            } else if (item2.qxdm === 'zdyfzsb:zcbdfz') {
              this.quanxianBtns.btn7 = false // 加入分组
            } else if (item2.qxdm === 'zcgl:deletes') {
              this.quanxianBtns.btn8 = false // 资产报废
            }
          })
        }
      })
    },
    // 详情图片预览
    yuLanTP(val) {
      const arr = []
      if (val) {
        const aiya = JSON.parse(val)
        aiya.forEach((item) => {
          arr.push(item.url)
        })
      }
      return arr
    },
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    // 获取资产列表
    getZiList() {
      clearTimeout(this.tableTimer)
      this.loadTable()
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      params.append('userId', user.id)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    async setList(params) {
      if (this.num > 0) {
        this.gouXuanList = []
        this.num = 0
      }
      var sns = []
      // const { data: res } = await this.$http.post(`${ziC}zcgl/selectZiChan`, params)
      const { data: res } = await this.$http.post(`${ziC}zcgl/getAssetsList`, params)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            if (Number(item.zclx) === 53) {
              sns.push(item.sbxlh)
              item.wlzt = ''
            }
          })
          // 获取网络状态
          if (sns.length > 0) {
            this.getWlzt(sns)
          }
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 获取品牌
    async getPingpai() {
      const { data: res } = await this.$http.post(`${ziC}pp/list`)
      const arr = []
      if (res.code !== '0000') {
        this.tiText1 = res.message
        this.ppmcOptions = []
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.ppmc,
          }
          arr.push(k)
        })
        this.ppmcOptions = arr
      }
    },
    // 获取资产
    async getzican() {
      const params = new URLSearchParams()
      params.append('FLXID', 0)
      const { data: res } = await this.$http.post(`${ziC}zczd/list`, params)
      if (res.code !== '0000') {
        this.zicanOptions = []
        return this.$message({
          type: 'error',
          message: '资产' + res.message,
          center: true,
        })
      } else {
        const city = JSON.stringify(res.data.list)
        const newCity = city.replace(/id/g, 'value')
        const cityList = newCity.replace(/lxmc/g, 'label')
        this.zicanOptions = JSON.parse(cityList)
      }
    },
    // 加入分组
    async addFenzhu() {
      this.dialogVisible = true
      this.searchFenzhuXinxi()
    },
    // 资产分组/辖区
    async fenzuChange(e) {
      // if (e === '资产分组') {
      //   const user = JSON.parse(getUrl('userconter'))
      //   const params = new URLSearchParams()
      //   params.append('YH_ID', user.id)
      //   const { data: res } = await this.$http.post(`${ziC}zdyfz/list`, params)
      //   this.zicanfanzhuList = res.data.list
      // }
      if (e === '资产分组') {
        const user = JSON.parse(getUrl('userconter'))
        const params = new URLSearchParams()
        params.append('YH_ID', user.id)
        const { data: res } = await this.$http.post(`${ziC}zdyfz/list`, params)
        this.zicanfanzhuList = res.data.list
        // console.log(this.zicanfanzhuList)
      } else {
      }
      this.radioList = e
    },
    // 分组筛选
    fenzhuXZ(item) {
      // console.log('-----', item)
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (user.xqbmdj === 1) {
        params.append('SF', user.xqbm)
      } else if (user.xqbmdj === 2) {
        params.append('CS', user.xqbm)
      } else if (user.xqbmdj === 3) {
        params.append('QX', user.xqbm)
      } else if (user.xqbmdj === 4) {
        params.append('XZJD', user.xqbm)
      }
      params.append('userId', user.id)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('ZCFZID', item.id)
      this.setList(params)
    },
    // 分组搜索
    async searchFenzhuXinxi() {
      const params = new URLSearchParams()
      const user = JSON.parse(getUrl('userconter'))
      params.append('YH_ID', user.id)
      params.append('SBZMC', this.fenzuList.searchFZ)
      params.append('M_', this.addCurrentPage)
      params.append('N_', 10)
      const { data: res } = await this.$http.post(`${ziC}zdyfz/list`, params)
      if (res.code === '0013') {
        this.addTotal = 0
        return (this.zicanfanzhuList = [])
      }
      this.zicanfanzhuList = res.data.list
      this.addTotal = res.data.countList
    },
    addUser(title, scope) {
      var azTime = this.harderBox.azTime
      if (this.harderBox.azTime) {
        azTime = this.harderBox.azTime.join('>')
      }
      if (title === '添加资产') {
        this.$router.push({
          name: 'Addproperty', // 路由
          query: {
            // 传递参数
            title: title,
            type: 1, // 1-新增  2-修改
            piLianExcel: this.quanxianBtns.btn4,
            pingpai: this.harderBox.pingpai, // 品牌
            zicanglx: this.harderBox.zicanglx, // 资产类型
            zicanZT: this.harderBox.zicanZT, // 资产状态
            azTime: azTime, // 安装时间
            sous: this.harderBox.sous, // 资产名称/ip/sn号
            url: 'propertyList',
            // currentPage: this.currentPage, // 当前页
            // pageSize: this.pageSize, // 页码
          },
        })
      } else {
        if (scope.zclx !== 53) {
          this.$router.push({
            name: 'Addproperty', // 路由
            query: {
              // 传递参数
              title: title,
              type: 2, // 1-新增  2-修改
              content: scope.id,
              pingpai: this.harderBox.pingpai, // 品牌
              zicanglx: this.harderBox.zicanglx, // 资产类型
              zicanZT: this.harderBox.zicanZT, // 资产状态
              azTime: azTime, // 安装时间
              sous: this.harderBox.sous, // 资产名称/ip/sn号
              url: 'propertyList',
              // currentPage: this.currentPage, // 当前页
              // pageSize: this.pageSize, // 页码
            },
          })
        } else {
          this.$router.push({
            name: 'keepOnRecord', // 路由
            query: {
              // 传递参数
              content: scope.id,
              title: '添加资产',
              url: 'propertyList',
              pingpai: this.harderBox.pingpai, // 品牌
              zicanglx: this.harderBox.zicanglx, // 资产类型
              zicanZT: this.harderBox.zicanZT, // 资产状态
              azTime: azTime, // 安装时间
              sous: this.harderBox.sous, // 资产名称/ip/sn号
              // currentPage: this.currentPage, // 当前页
              // pageSize: this.pageSize, // 页码
            },
          })
        }
      }
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    searchBtn(val) {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      // wlzt
      const { zicanZT, pingpai, zicanglx, azTime, sous } = this.harderBox
      const user = JSON.parse(getUrl('userconter'))
      const params = new URLSearchParams()
      if (val) {
        if (val.levels === 1) {
          params.append('SF', val.label)
        } else if (val.levels === 2) {
          params.append('CS', val.label)
        } else if (val.levels === 3) {
          params.append('QX', val.label)
        } else if (val.levels === 4) {
          params.append('XZJD', val.label)
        }
      } else {
        if (this.xianQu) {
          if (this.xianQu.levels === 1) {
            params.append('SF', this.xianQu.label)
          } else if (this.xianQu.levels === 2) {
            params.append('CS', this.xianQu.label)
          } else if (this.xianQu.levels === 3) {
            params.append('QX', this.xianQu.label)
          } else if (this.xianQu.levels === 4) {
            params.append('XZJD', this.xianQu.label)
          }
        }
      }
      // if (user.xqbmdj === 1) {
      //   params.append('SF', user.xqbm)
      // } else if (user.xqbmdj === 2) {
      //   params.append('CS', user.xqbm)
      // } else if (user.xqbmdj === 3) {
      //   params.append('QX', user.xqbm)
      // } else if (user.xqbmdj === 4) {
      //   params.append('XZJD', user.xqbm)
      // }
      if (azTime) {
        params.append('KSSJ', azTime[0])
        params.append('JSSJ', azTime[1])
      }
      params.append('userId', user.id)
      // params.append('M_', size)
      // params.append('N_', current)
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('PP_ID', pingpai)
      params.append('ZCMC_IP_XH', sous)
      // if (wlzt) {
      //   params.append('ZXZT', wlzt)
      // }
      params.append('ZCLX_XJ', zicanglx[zicanglx.length - 1] || '')
      params.append('ZCZT', zicanZT)
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      this.setList(params)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.searchBtn()
    },
    handleCurrentChange(current) {
      this.currentPage = current
      this.searchBtn()
    },
    // 勾选
    isCheck(e, v) {
      this.num = e.length
      this.gouXuanList = e
    },
    // 全选
    isCheckAll(e, v) {
      this.num = e.length
      this.gouXuanList = e
    },
    Dayin: function () {
      // 判断iframe是否存在，不存在则创建iframe
      var iframe = document.getElementById('printIframe')
      if (!iframe) {
        var el = document.getElementById('printcontent')
        iframe = document.createElement('IFRAME')
        var doc = null
        iframe.setAttribute('id', 'printIframe')
        iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:-500px;top:-500px;')
        document.body.appendChild(iframe)
        doc = iframe.contentWindow.document
        // 这里可以自定义样式
        // doc.write("<LINK rel="stylesheet" type="text/css" href="css/print.css">");
        doc.write('<div>' + el.innerHTML + '</div>')
        doc.close()
        iframe.contentWindow.focus()
      }
      iframe.contentWindow.print()
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe)
      }
    },
    handStart: function () {
      this.handStart = true
    },
    // 关闭分组
    offFZ: function () {
      this.dialogVisible = false
      this.kakouAddSheBei = []
      this.addCurrentPage = 1
      this.fenzuList = {
        searchFZ: '',
        fenzuCheckList: [],
      }
    },
    // 加入分组
    async submitFZ() {
      this.dialogVisible = false
      const id = []
      this.gouXuanList.forEach((item) => {
        id.push(item.id)
      })
      const params = new URLSearchParams()
      params.append('SBZ_IDS', this.fenzuList.fenzuCheckList)
      params.append('SB_IDS', id)
      const { data: res } = await this.$http.post(`${ziC}zdyfzsb/create`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.$refs.multipleTable.clearSelection()
      this.gouXuanList = []
      this.num = 0
    },
    // 报废
    async baoFei() {
      this.$refs.bfruleForm.validate(async (valid) => {
        if (valid) {
          this.dialogVisible5 = false
          const { textarea } = this.bfruleForm
          const arr = []
          this.gouXuanList.forEach((item) => {
            arr.push(item.id)
          })
          const user = JSON.parse(getUrl('userconter'))
          const params = new URLSearchParams()
          params.append('ids', arr)
          params.append('YHID', user.id)
          params.append('BFYY', textarea)
          const { data: res } = await this.$http.post(`${ziC}zcgl/deletes`, params)
          if (res.code === '0014') {
            return ''
          } else if (res.code !== '0000') {
            return this.$message({
              type: 'error',
              message: res.message,
              center: true,
            })
          }
          this.$refs.multipleTable.clearSelection()
          this.gouXuanList = []
          this.num = 0
          setTimeout(() => {
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            // this.getZiList()
            this.currentPage = 1
            this.pageSize = 10
            this.searchBtn()
          }, 500)
        }
      })
    },
    offBF: function () {
      this.bfruleForm.textarea = ''
    },
    // 报废
    pilianpf: function () {
      this.gouXuanList.forEach((item) => {
        if (item.bdzt > 0) {
          this.dialogVisible6 = true
        }
      })
      if (!this.dialogVisible6) {
        this.dialogVisible5 = true
      }
    },
    yuanChenKZ(scope) {
      if (scope.zclxmc === '运维主机' && scope.zclx === 53) {
        // this.$router.push('/mainboard')
        //   跳转界面 //MainBoardEdit
        localStorage.setItem('SN', scope.sbxlh)
        localStorage.setItem('password', scope.dlmm)
        localStorage.setItem('IP', scope.ip)
        localStorage.setItem('XQBM', scope.xqbm)
        sessionStorage.setItem('mianUrl', '')
        localStorage.setItem('zcmc', scope.zcmc)
        this.$router.push({ name: 'mainboaredit' })
      } else {
        window.open('http://' + scope.ip, '_blank')
      }
    },
    showPingOk(scope) {
      this.ping.speedOpen = true
      this.ping.ip = scope.ip
      this.ping.name = scope.zcmc
    },
    // ping组件
    pingguanbi(val) {
      this.ping = {
        speedOpen: val.type,
        name: '', // ping设备名称
        ip: '',
      }
    },
    // tree形搜索
    treeClick(e) {
      this.pageSize = 10
      this.currentPage = 1
      this.searchBtn(e.type)
      this.xianQu = e.type
    },
    // 点击开启
    rowClick(row, column, event) {
      const a = this.gouXuanList.findIndex((item) => item.id === row.id)
      if (a !== -1) {
        this.gouXuanList.splice(a, 1)
        this.$refs.multipleTable.toggleRowSelection(row, false)
      } else {
        this.gouXuanList.push(row)
        const s1 = new Set(this.gouXuanList)
        this.gouXuanList = [...s1]
        this.$refs.multipleTable.toggleRowSelection(row, true)
      }
      this.num = this.gouXuanList.length
    },
    userBox(scope) {
      if (scope.mb === 1) {
        this.panduanShow = true
      } else if (scope.mb === 2) {
        this.panduanShow2 = true
      } else if (scope.mb === 3) {
        this.panduanShow3 = true
      }
      this.getxianxisj(scope.id)
      // this.gettianxieren(scope.rkdjr_ID)
    },
    // 获取详细数据
    async getxianxisj(id) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${ziC}zcgl/selectByID`, params)
      if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      } else {
        this.activeName = 'jbxx'
        this.contractDialogVisible = true
        this.contractDetailList = res.data
      }
    },
    // // 获取填写人
    // async gettianxieren(id) {
    //   const params = new URLSearchParams()
    //   params.append('ID', id)
    //   const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params)
    //   if (res.code !== '0000') {
    //     return
    //   }
    //   res.data.list.forEach((item) => {
    //     this.contractDetailList.dlzh = item.zh
    //   })
    // },
    addHandleCurrentChange(val) {
      this.addCurrentPage = val
      this.searchFenzhuXinxi()
    },
  },
  destroyed: function () {
    // if (this.socket) {
    //   this.socket.send('CLOSE') // 关闭页面前发送
    //   // 销毁监听
    //   this.socket.onclose = this.socket.close()
    // }
  },
}
</script>
<style lang="scss" scoped>
// ::v-deep .el-icon-circle-close {
//   font-size: 45px;
// }
.wlzt {
  &.iconfont {
    vertical-align: middle;
    margin-right: 10px;
    width: 20px;
    height: 20px;
  }
}

.left_box {
  border-right: 1px solid #f0f0f0;
  .left_item {
    padding: 15px 5px;
    .el-radio-group {
      display: flex;
      .el-radio-button {
        width: 50%;
        height: 32px;
        line-height: 32px;
      }
    }
    .tree_box {
      margin-top: 10px;
      .usersNumber2 {
        display: flex;
        width: 135px;
        cursor: pointer;
        overflow: hidden;
        -webkit-line-clamp: 1;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        white-space: nowrap;
        position: relative;
      }
      .usersNumber2:after {
        content: '...';
        text-align: right;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10%;
        height: 1.8em;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
      }
    }
    .zicanfanzhuBox {
      margin-top: 15px;
      .zicanfanzhu {
        width: 100%;
        height: 30px;
        line-height: 30px;
        cursor: pointer;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .zicanfanzhu:hover {
        background-color: #f5f7fa;
      }
    }
  }
}
.right_box {
  .dialogText {
    .p_15 {
      padding-top: 15px;
    }
    font-size: 14px;
    color: #333;
    .star {
      color: #f56c6c;
    }
    .lineHight .el-row {
      line-height: 40px;
      span {
        &:not(.el-tag) {
          color: #333;
        }
        &.contentFont {
          display: inline-block;
          width: 103px;
          color: #7a7a7a;
          text-align: right;
        }
      }
    }
  }
  .search_btn {
    width: 200px;
  }

  .dialogTitle {
    font-size: 15px;
    font-weight: 600;
    > em {
      font-size: 12px;
      color: #909399;
      font-style: normal;
      margin-left: 10px;
    }
  }
  .input-with-select {
    width: 50%;
    // .searchFZ_btn {
    //   width: 40px;
    //   padding: 10.5px;
    //   margin: 0;
    //   background-color: #f5f7fa;
    // }
  }
  .dropDown {
    margin-top: 15px;
    // width: 840px;
    width: 100%;
    height: 305px;
    border: 1px solid #eaeaea;
    overflow: auto;
    > li {
      height: 50px;
      line-height: 50px;
      padding: 0 20px;
      border-bottom: 1px solid #eaeaea;
    }
  }
  .HostTitle {
    display: block;
    color: #909399;
    margin-bottom: 15px;
  }

  .imgIcon {
    vertical-align: middle;
    width: 18px;
    height: 18px;
    margin: 0 3px 0 5px;
  }
  .img_shouji {
    width: 16px;
    height: 16px;
  }
}
</style>
